<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;

		}
	

		/* 开启弹性布局给父盒子设置 */
	.box {
	
		height: 600px;
		width: 600px;
		border: 1px solid red;
		display: flex;
		/* flex-wrap: wrap; */  /*设置换行*/
	
	  
	/* justify-content: center; */
	justify-content: space-around;
	/* justify-content: space-between; */
	align-items: center;

		
	}
	.box div {
		width: 200px;
		height: 200px;
		background-color: green;
	}

	.box2 {

		height: 600px;
		border: 1px solid red;
		display: flex;

	}

	.box2 input {
		flex: 7;

		border: 2px solid red;
		height: 60px;
		margin-right: 10px;
		box-sizing: border-box;
		padding-left: 20px;
	




	}
	.box2 button {

	 /* width: 100px; */	
		 flex: 1;
		
		height: 60px; 


		display: flex;
		justify-content: center;
		align-items: center;



		
	}




	</style>
</head>
<body>
	  <div class="box">
      <div>1</div>
	 <div>2</div>
	  <div>3</div>
	  <div>4</div>
	  </div>

	  <div class="box2">
      <input type="text" placeholder="请输入关键字" >

     <button>点击收索</button>
	  </div>
</body>
</html>